<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 900px;
            height: 500px;
            border: 1px solid black;
            background-color: blue;
        }
    </style>

    <link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" />

    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        var layer, markers;
        
        var currentPopup;
        
        var samplePopupContentsHTML = "Old man down, way down down, down by the docks of the city.<br>Blind and dirty, asked me for a dime, a dime for a cup of coffee.<br>I got no dime but I got some time to hear his story.<br>My name is August West, and I love my Pearly Baker best more than my wine.<br>More than my wine - more than my maker, though he's no friend of mine.<br><br>Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,<br>The other half found me stumbling 'round drunk on Burgundy wine.<br><br>But I'll get back on my feet again someday,<br>The good Lord willin', if He says I may.<br>I know that the life i'm livin's no good,<br>I'll get a new start, live the life I should.<br>I'll get up and fly away, I'll get up and fly away, fly away.<br><br>Pearly's been true, true to me, true to my dyin' day he said,<br>I said to him, I said to him, I'm sure she's been.<br>I said to him, I'm sure she's been tru to you.<br><br>Got up and wandered, wandered downtown, nowhere to go but just hang around.<br>I've got a girl, named Bonnie Lee, I know that girl's been true to me.<br>I know she's been, I'm sure she's been true to me.<br><br>";
        var samplePopupContentsHTML_WideShort = "Old man down, way down down, down by the docks of the city.Blind and dirty, asked me for a dime, a dime for a cup of coffee.I got no dime but I got some time to hear his story.My name is August West, and I love my Pearly Baker best more than my wine.More than my wine - more than my maker, though he's no friend of mine.Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,The other half found me stumbling 'round drunk on Burgundy wine.But I'll get back on my feet again someday,The good Lord willin', if He says I may.I know that the life i'm livin's no good,I'll get a new start, live the life I should.I'll get up and fly away, I'll get up and fly away, fly away.Pearly's been true, true to me, true to my dyin' day he said,I said to him, I said to him, I'm sure she's been.I said to him, I'm sure she's been tru to you.Got up and wandered, wandered downtown, nowhere to go but just hang around.I've got a girl, named Bonnie Lee, I know that girl's been true to me.I know she's been, I'm sure she's been true to me.";
        
// different popup types

    //anchored
        AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
            'autoSize': true
        });

        AutoSizeAnchoredMinSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
            'autoSize': true, 
            'minSize': new OpenLayers.Size(400,400)
        });

        AutoSizeAnchoredMaxSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
            'autoSize': true, 
            'maxSize': new OpenLayers.Size(100,100)
        });

        //anchoredbubble
    
        AutoSizeAnchoredBubble = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
            'autoSize': true
        });

        AutoSizeAnchoredBubbleMinSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
            'autoSize': true, 
            'minSize': new OpenLayers.Size(400,400)
        });

        AutoSizeAnchoredBubbleMaxSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
            'autoSize': true, 
            'maxSize': new OpenLayers.Size(100,100)
        });

        //framed

        //disable the autosize for the purpose of our matrix
        OpenLayers.Popup.FramedCloud.prototype.autoSize = false;

        AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true
        });

        AutoSizeFramedCloudMinSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true, 
            'minSize': new OpenLayers.Size(400,400)
        });

        AutoSizeFramedCloudMaxSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true, 
            'maxSize': new OpenLayers.Size(100,100)
        });

        
        function init(){
            map = new OpenLayers.Map('map');

            layer = new OpenLayers.Layer.Image(
                "popupMatrix", 
                "popupMatrix.jpg", 
                new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5),
                new OpenLayers.Size(1024,768)
            );
            map.addLayer(layer);

            markers = new OpenLayers.Layer.Markers("zibo");
            map.addLayer(markers);

            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();

            addMarkers();
        }
        
        function addMarkers() {

            var ll, popupClass, popupContentHTML;

        //
        //Anchored NO OVERFLOW
        //

            //anchored popup small contents no autosize
            ll = new OpenLayers.LonLat(-55,20);
            popupClass = OpenLayers.Popup.Anchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup small contents no autosize closebox
            var ll = new OpenLayers.LonLat(-50,20);
            popupClass = OpenLayers.Popup.Anchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup small contents autosize
            ll = new OpenLayers.LonLat(-40,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup small contents autosize minsize
            ll = new OpenLayers.LonLat(-25,20);
            popupClass = AutoSizeAnchoredMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup small contents autosize minsize closebox
            ll = new OpenLayers.LonLat(-20,20);
            popupClass = AutoSizeAnchoredMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup small contents autosize maxsize
            ll = new OpenLayers.LonLat(-10,20);
            popupClass = AutoSizeAnchoredMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup small contents autosize maxsize closebox
            ll = new OpenLayers.LonLat(-5,20);
            popupClass = AutoSizeAnchoredMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup bigger contents autosize
            ll = new OpenLayers.LonLat(5,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(10,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true);

            //anchored popup wide short text contents autosize
            ll = new OpenLayers.LonLat(20,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup wide short text contents autosize closebox
            ll = new OpenLayers.LonLat(25,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup wide short fixed contents autosize
            ll = new OpenLayers.LonLat(35,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="wideshort.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup wide short fixed contents autosize closebox
            ll = new OpenLayers.LonLat(40,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="wideshort.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup thin long fixed contents autosize
            ll = new OpenLayers.LonLat(50,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="thinlong.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup thin long fixed contents autosize closebox
            ll = new OpenLayers.LonLat(55,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="thinlong.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored popup wide long fixed contents autosize
            ll = new OpenLayers.LonLat(65,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img  src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored popup wide long fixed contents autosize closebox
            ll = new OpenLayers.LonLat(70,20);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img  src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);

        //
        //Anchored WITH OVERFLOW
        //

            //anchored popup small contents no autosize overflow
            var ll = new OpenLayers.LonLat(-55,15);
            popupClass = OpenLayers.Popup.Anchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup small contents no autosize closebox overflow
            var ll = new OpenLayers.LonLat(-50,15);
            popupClass = OpenLayers.Popup.Anchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup small contents autosize overflow
            ll = new OpenLayers.LonLat(-40,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup small contents autosize closebox overflow
            ll = new OpenLayers.LonLat(-35,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup small contents autosize minsize overflow
            ll = new OpenLayers.LonLat(-25,15);
            popupClass = AutoSizeAnchoredMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup small contents autosize minsize closebox overflow
            ll = new OpenLayers.LonLat(-20,15);
            popupClass = AutoSizeAnchoredMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup small contents autosize maxsize overflow
            ll = new OpenLayers.LonLat(-10,15);
            popupClass = AutoSizeAnchoredMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup small contents autosize maxsize closebox overflow
            ll = new OpenLayers.LonLat(-5,15);
            popupClass = AutoSizeAnchoredMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup bigger contents autosize overflow
            ll = new OpenLayers.LonLat(5,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup bigger contents autosize closebox overflow
            ll = new OpenLayers.LonLat(10,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup wide short text contents autosize overflow
            ll = new OpenLayers.LonLat(20,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup wide short text contents autosize closebox overflow
            ll = new OpenLayers.LonLat(25,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);

            //anchored popup wide short fixed contents autosize overflow
            ll = new OpenLayers.LonLat(35,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup wide short fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(40,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup thin long fixed contents autosize overflow
            ll = new OpenLayers.LonLat(50,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup thin long fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(55,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored popup wide long fixed contents autosize overflow
            ll = new OpenLayers.LonLat(65,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored popup wide long fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(70,15);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


        //
        //Bubble NO OVERFLOW
        //

            //anchored bubble popup small contents no autosize
            var ll = new OpenLayers.LonLat(-55,5);
            popupClass = OpenLayers.Popup.AnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents no autosize closebox
            var ll = new OpenLayers.LonLat(-50,5);
            popupClass = OpenLayers.Popup.AnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup small contents autosize
            ll = new OpenLayers.LonLat(-40,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup small contents autosize minsize
            ll = new OpenLayers.LonLat(-25,5);
            popupClass = AutoSizeAnchoredBubbleMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents autosize minsize closebox
            ll = new OpenLayers.LonLat(-20,5);
            popupClass = AutoSizeAnchoredBubbleMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup small contents autosize maxsize
            ll = new OpenLayers.LonLat(-10,5);
            popupClass = AutoSizeAnchoredBubbleMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents autosize maxsize closebox
            ll = new OpenLayers.LonLat(-5,5);
            popupClass = AutoSizeAnchoredBubbleMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(5,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(10,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup wide short text contents autosize
            ll = new OpenLayers.LonLat(20,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup wide short text contents autosize closebox
            ll = new OpenLayers.LonLat(25,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup wide short fixed contents autosize
            ll = new OpenLayers.LonLat(35,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup wide short fixed contents autosize closebox
            ll = new OpenLayers.LonLat(40,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup thin long fixed contents autosize
            ll = new OpenLayers.LonLat(50,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup thin long fixed contents autosize closebox
            ll = new OpenLayers.LonLat(55,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup wide long fixed contents autosize
            ll = new OpenLayers.LonLat(65,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup wide long fixed contents autosize closebox
            ll = new OpenLayers.LonLat(70,5);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);

          //
          //Bubble OVERFLOW
          //

              //anchored bubble popup small contents no autosize
            var ll = new OpenLayers.LonLat(-55,0);
            popupClass = OpenLayers.Popup.AnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

              //anchored bubble popup small contents no autosize closebox
            var ll = new OpenLayers.LonLat(-50,0);
            popupClass = OpenLayers.Popup.AnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup small contents autosize
            ll = new OpenLayers.LonLat(-40,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup small contents autosize minsize
            ll = new OpenLayers.LonLat(-25,0);
            popupClass = AutoSizeAnchoredBubbleMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup small contents autosize minsize closebox
            ll = new OpenLayers.LonLat(-20,0);
            popupClass = AutoSizeAnchoredBubbleMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup small contents autosize maxsize
            ll = new OpenLayers.LonLat(-10,0);
            popupClass = AutoSizeAnchoredBubbleMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup small contents autosize maxsize closebox
            ll = new OpenLayers.LonLat(-5,0);
            popupClass = AutoSizeAnchoredBubbleMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(5,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(10,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>closebox<br>overflow<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup wide short contents autosize overflow
            ll = new OpenLayers.LonLat(20,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup wide short contents autosize closebox overflow
            ll = new OpenLayers.LonLat(25,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup wide short fixed contents autosize overflow
            ll = new OpenLayers.LonLat(35,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup wide short fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(40,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup thin long fixed contents autosize overflow
            ll = new OpenLayers.LonLat(50,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup thin long fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(55,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup wide long fixed contents autosize overflow
            ll = new OpenLayers.LonLat(65,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup wide long fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(70,0);
            popupClass = AutoSizeAnchoredBubble;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);

   //FRAMED
 
          //
          //FRAMED NO OVERFLOW
          //

              //anchored bubble popup small contents no autosize
            var ll = new OpenLayers.LonLat(-55,-15);
            popupClass = OpenLayers.Popup.FramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

              //anchored bubble popup small contents no autosize closebox
            var ll = new OpenLayers.LonLat(-50,-15);
            popupClass = OpenLayers.Popup.FramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup small contents autosize
            ll = new OpenLayers.LonLat(-40,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup small contents autosize minsize
            ll = new OpenLayers.LonLat(-25,-15);
            popupClass = AutoSizeFramedCloudMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents autosize minsize closebox
            ll = new OpenLayers.LonLat(-20,-15);
            popupClass = AutoSizeFramedCloudMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup small contents autosize maxsize
            ll = new OpenLayers.LonLat(-10,-15);
            popupClass = AutoSizeFramedCloudMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup small contents autosize maxsize closebox
            ll = new OpenLayers.LonLat(-5,-15);
            popupClass = AutoSizeFramedCloudMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(5,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false);

            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(10,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup wide short text contents autosize
            ll = new OpenLayers.LonLat(20,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup wide short text contents autosize closebox
            ll = new OpenLayers.LonLat(25,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup wide short fixed contents autosize
            ll = new OpenLayers.LonLat(35,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup wide short fixed contents autosize closebox
            ll = new OpenLayers.LonLat(40,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup thin long fixed contents autosize
            ll = new OpenLayers.LonLat(50,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup thin long fixed contents autosize closebox
            ll = new OpenLayers.LonLat(55,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);


            //anchored bubble popup wide long fixed contents autosize
            ll = new OpenLayers.LonLat(65,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML);

            //anchored bubble popup wide long fixed contents autosize closebox
            ll = new OpenLayers.LonLat(70,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true);

          //
          //FRAMED OVERFLOW
          //

              //anchored bubble popup small contents no autosize
            var ll = new OpenLayers.LonLat(-55,-20);
            popupClass = OpenLayers.Popup.FramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

              //anchored bubble popup small contents no autosize closebox
            var ll = new OpenLayers.LonLat(-50,-20);
            popupClass = OpenLayers.Popup.FramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup small contents autosize
            ll = new OpenLayers.LonLat(-40,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup small contents autosize minsize
            ll = new OpenLayers.LonLat(-25,-20);
            popupClass = AutoSizeFramedCloudMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup small contents autosize minsize closebox
            ll = new OpenLayers.LonLat(-20,-20);
            popupClass = AutoSizeFramedCloudMinSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup small contents autosize maxsize
            ll = new OpenLayers.LonLat(-10,-20);
            popupClass = AutoSizeFramedCloudMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup small contents autosize maxsize closebox
            ll = new OpenLayers.LonLat(-5,-20);
            popupClass = AutoSizeFramedCloudMaxSize;
            popupContentHTML = '<img src="small.jpg"></img>';
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(5,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup bigger contents autosize closebox
            ll = new OpenLayers.LonLat(10,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>overflow<br>' + samplePopupContentsHTML + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup wide short contents autosize overflow
            ll = new OpenLayers.LonLat(20,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup wide short contents autosize closebox overflow
            ll = new OpenLayers.LonLat(25,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup wide short fixed contents autosize overflow
            ll = new OpenLayers.LonLat(35,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup wide short fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(40,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="wideshort.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup thin long fixed contents autosize overflow
            ll = new OpenLayers.LonLat(50,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup thin long fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(55,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="thinlong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);


            //anchored bubble popup wide long fixed contents autosize overflow
            ll = new OpenLayers.LonLat(65,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, false, true);

            //anchored bubble popup wide long fixed contents autosize closebox overflow
            ll = new OpenLayers.LonLat(70,-20);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = '<img src="widelong.jpg"></img>' 
            addMarker(ll, popupClass, popupContentHTML, true, true);
 

        }

        /**
         * Function: addMarker
         * Add a new marker to the markers layer given the following lonlat, 
         *     popupClass, and popup contents HTML. Also allow specifying 
         *     whether or not to give the popup a close box.
         * 
         * Parameters:
         * ll - {<OpenLayers.LonLat>} Where to place the marker
         * popupClass - {<OpenLayers.Class>} Which class of popup to bring up 
         *     when the marker is clicked.
         * popupContentHTML - {String} What to put in the popup
         * closeBox - {Boolean} Should popup have a close box?
         * overflow - {Boolean} Let the popup overflow scrollbars?
         */
        function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
        }

    </script>
  </head>
  <body onload="init()">
  <h1 id="title">Popup Matrix</h1>

  <div id="tags">
  </div>
      <p id="shortdesc">
          All kinds of different popup configurations.
      </p>

      <div id="map" class="smallmap"></div>

        <!-- preloading these images so the autosize will work correctly -->
        <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
        <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
        <img src="thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>

       <p> All of the images in this file a pre-cached, meaning they are 
           loaded immediately when you load the page (they are just placed 
           far offscreen, that's why you don't see them). 
       </p>
       <br>    
       <p> The only image that is *not* preloaded is small.jpg, the brazilian
           flag. We do this in order to test out to make sure that our auto-sizing
             code does in fact activate itself as the images load. To verify 
             this, clear your cache and reload this example page. Click on 
             any of the markers in the 'AutoSize' row. If the popup autosizes
             to correctly contain the entire flag: golden. If the popup is 
             tiny and you can only see a corner of it, then this code is broken.
        </p>

      <br/>      

      
   </div>
  </body>
</html>
